<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        input {
            width: 200px;
            height: 40px;
            transition: all 1s;
        }
        input:focus {
            height: 70px;
        }
    </style>
</head>
<body>
    <input type="text">

    <script>
        const focus = document.querySelector('input')

        // focus.addEventListener('mouseenter', function(e){
        //     console.log(e);
        // })

        // focus.addEventListener('focus', function(e){
        //     console.log(e);
        //     // const offsetTop = e.target.offsetTop
        //     // const offsetLeft = e.target.offsetLeft
        //     // const offsetWidth = e.target.offsetWidth
        //     // const offsetHeight = e.target.offsetHeight
        //     // console.log(offsetTop, offsetLeft, offsetWidth, offsetHeight);
        //     // console.log(e.target.getBoundingClientRect());
        // })
        // focus.addEventListener('blur', function(e){
        //     console.log('失去焦点', e);
        // })

        // focus.addEventListener('keydown', function(e){
        //     console.log('e', e);
        // })
        // focus.addEventListener('keyup', function(){
        //     console.log('键盘抬起');
        // })

    </script>

</body>
</html>